<template>
  <div class="joe_main">
    <div class="joe_comment">
      <a-layout id="components-layout-demo-top-side-2">
        <a-layout>
          <a-layout-sider style="background: #fff">
            <a-menu
              mode="inline"
              :default-selected-keys="[$route.path]"
              :default-open-keys="['img','file']"
              :selected-keys="[$route.path]"
              :style="{ height: '100%', borderRight: 0 }"
            >
              <template v-for="item in menus">
                <a-sub-menu :key="item.label" v-if="item.type == 'group'">
                  <span slot="title">
                    {{ item.title }}
                  </span>
                  <template v-for="children in item.children">
                    <a-menu-item :key="children.label">
                      <router-link :to="children.label">
                        {{ children.title }}
                      </router-link>
                    </a-menu-item>
                  </template>
                </a-sub-menu>
                <a-menu-item :key="item.label" v-else>
                  <router-link :to="item.label">
                    {{ item.title }}
                  </router-link>
                </a-menu-item>
              </template>
            </a-menu>
          </a-layout-sider>
          <a-layout>
            <a-layout-content
              :style="{ background: '#fff', margin: 0, minHeight: '600px' }"
            >
              <div class="joe_comment">
                <router-view
                  :key="key()"
                />
              </div>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </div>
  </div>
</template>


<script>
import AntsImageUpload from '@/components/ants/AntsImageUpload'

export default {
  name: 'compress',
  components: {
    AntsImageUpload
  },
  data() {
    return {
      form: this.$form.createForm(this),
      menus: [
        {
          label: 'img',
          title: '图片处理',
          type: "group",
          children: [
            {
              label: '/tools/imgCompress',
              title: '图片压缩',
            },
            {
              label: '/tools/imgResize',
              title: '图片改尺寸',
            },
          ],
        },
        {
          label: 'file',
          title: '文件处理',
          type: "group",
          children: [
            {
              label: '/tools/excelToPdf',
              title: 'Excel转PDF',
            },
            {
              label: '/tools/docToPdf',
              title: 'Word转PDF',
            },
          ],
        },
        {
          label: '/tools/cron',
          title: 'cron表达式',
          type: ""
        },
        {
          label: '/tools/json',
          title: 'JSON格式化',
          type: ""
        },
        {
          label: '/tools/randomPassword',
          title: '随机密码生成器',
          type: ""
        },
      ],
      defaultSelectedKeys: [],
      selectedKeys: [],
    }
  },
  created() {
    this.defaultSelectedKeys = [this.$route.path]
    this.selectedKeys = [this.$route.path]
  },
  methods: {
    key() {
      return this.$route.path
    },
  }

}
</script>

<style>
.commentReview {
  color: #999;
  display: inline;
  font-weight: 400 !important;
}

</style>

